<template>
    <div id="main">
        <div class="bar">
            <div class="left">
                {{  title ? title : "会员课程列表"}}
            </div>
            <div class="right">
                <el-button type="success" size="mini"  @click="addMenu"> <i class="el-icon-plus"></i> 添加课程</el-button>
            </div>
        </div>
        <!-- <div class="search">
            <el-input placeholder="请输入要搜索的会员名称或手机号码" v-model="username" class="input-with-select">
                
                <el-button slot="append" icon="el-icon-search" @click="searchArt"></el-button>
            </el-input>
        </div> -->
        <div class="table">
            <el-table
                :data="tableData"
                style="width: 100%;margin-bottom: 20px;"
                row-key="id"
                border
                default-expand-all
                :tree-props="{children: 'children', hasChildren: 'hasChildren'}">
                <el-table-column
                prop="userid"
                label="ID"
                align="center"
                sortable
               >
                </el-table-column>
                <el-table-column
                prop="nickname"
                align="center"
                label="会员名称"
                sortable
                >
                </el-table-column>
                <el-table-column
                prop="username"
                align="center"
                label="账户">
                </el-table-column>

                <el-table-column
                prop="name"
                align="center"
                label="开通课程">
                </el-table-column>
                
 
                <!-- <el-table-column
                prop="status"
                align="center"
                label="状态">
                    <template slot-scope="scope">
                        <el-button :type="scope.row.status == 1 ? 'success': 'danger' " size="mini" @click="changeStatus(scope.row.id)">{{ scope.row.status == 1 ? "开启" : "关闭" }}</el-button>
                    </template>
                </el-table-column> -->

                <el-table-column
                width="300"
                align="center"
                label="操作">
                    <template slot-scope="scope">
                        <!-- <el-button type="success" size="mini" @click="showKe(scope.row)">课程</el-button> -->
                        <el-button type="primary" size="mini" @click="editMenu(scope.row)">编辑</el-button>
                        <el-button type="danger" size="mini" @click="deleteUser(scope.row)">删除</el-button>
                    </template>
                </el-table-column>
            </el-table>
        </div>
     

        <!-- dialog -->
        <user-ke-dialog :DialogData="DialogData" :FormData="FormData" :select="select" @update="getAllMember"></user-ke-dialog>

    </div>
</template>

<script>
    import UserKeDialog from "@/components/dialog/UserKeDialog"

    export default {
        data() {
            return {
                tableData: [],
                DialogData: {
                    title: "",
                    show: false,
                },
                FormData: {},
                select: [],
               userid: "",
               title: "",
                
            }
        },
        components: {
            UserKeDialog,
        },
        computed: {
            token() {
                return localStorage.token; 
            }
        },
        created () {
            let id = this.$route.params.userid;
            if (id) {
                this.userid = id
                this.getAllMember( this.userid )
            }
        },
        mounted() {
            // this.getAllxue()
        },
        methods: {
            
            // 获取所有会员
            async getAllMember(  ) {
                this.tableData = []
                let userid = this.userid
                let res = await this.$axios.post("/admin/user/kaiclassshow", { token: this.token, userid })
                  console.log(res);
                if(res.data.code == 200) {
                    this.tableData .push(res.data.data)
                    this.title = res.data.data.nickname
                    // this.totalNum = this.tableData[0].count
                }
                
            },
            // 编辑菜单
            editMenu( user ) {
                this.DialogData = {
                    show: true,
                    title: "编辑课程",
                    add: false,
                    edit: true
                }
                this.FormData = user
            },
            // 添加菜单
            addMenu() {
                this.DialogData = {
                    show: true,
                    title: "添加课程",
                    add: true,
                    edit: false
                }
                this.FormData = {
                    userid: this.userid
                }
            },
           
            
            
        },
    }
</script>

<style lang="scss" scoped>
 #main {
     width: 100%;
     box-sizing: border-box;
     .bar {
         width: 100%;
         font-weight: bold;
         display: flex;
         justify-content: space-between;
         height: 40px;
         line-height: 40px;
         border-bottom: 1px solid #aaa;
     }
     .search {
         padding: 5px 0;
     }
     .page {
         width: 100%;
         text-align: right;
     }
     .table {
         margin-top: 20px;
     }
     .pic {
         width: 40px;
         height: 40px;
         display: block;
     }
 }
</style>